<style>
    #billing table .wpsc_checkout_table table-1{float:left}
    #billing table .wpsc_checkout_table table-2{float:right}
</style>
<script>
    $(document).ready(function()
    {
        $('#buy_product_complete').click(function()
        {
            if ('' == $('#wpsc_checkout_form_9').val()) {
                alert('your email not null');
                $('#wpsc_checkout_form_9').focus();
                return false;
            }

            if ('' == $('#wpsc_checkout_form_2').val()) {
                alert('your fist name not null');
                $('#wpsc_checkout_form_2').focus();
                return false;
            }
            if ('' == $('#wpsc_checkout_form_3').val()) {
                alert('your last name not null');
                $('#wpsc_checkout_form_3').focus();
                return false;
            }
            if ('' == $('#wpsc_checkout_form_4').val()) {
                alert('your address name not null');
                $('#wpsc_checkout_form_4').focus();
                return false;
            }
            if ('' == $('#wpsc_checkout_form_5').val()) {
                alert('your city name not null');
                $('#wpsc_checkout_form_5').focus();
                return false;
            }
            if ('' == $('#wpsc_checkout_form_18').val()) {
                alert('your phone number name not null');
                $('#wpsc_checkout_form_18').focus();
                return false;
            }
            return true;
        });
    });
</script>
<?php
global $wpsc_cart, $wpdb, $wpsc_checkout, $wpsc_gateway, $wpsc_coupons, $wpsc_registration_error_messages;
$wpsc_checkout = new wpsc_checkout();
?>
<div class="content-wrap">
    <div style="clear:both; display:block; height:20px"></div>
    <?php //my_load_intro(); ?>
    <div class="container-2">
        <div style="clear:both; display:block; height:40px"></div>
        <h2>Checkout: &nbsp;<small>Checkout Steps</small></h2>
        <div id="tab" class="tab2">
            <ul class="nav nav2">
                <li class="nav-one"><a href="#checkout" class="current">1. Checkout Option</a></li>
                <li class="nav-two"><a href="#billing">2. Billing Details</a></li>
                <li class="nav-three"><a href="#delivery">3. Delivery Details</a></li>
                <li class="nav-four"><a href="#deliverymethod">4. Delivery Method</a></li>
                <li class="nav-five"><a href="#payment">5. Payment Method</a></li>
                <li class="nav-six"><a href="#confirm">6. Confirm Order</a></li>
            </ul>
            <div class="list-wrap checkoutbox">
                <div id="checkout">	
                    <div class="one-half first log">
                        <h4>Customers with a registered account</h4>
                        <form method="post" class="signin" action="#">
                            <fieldset class="textbox">
                                <label class="username">
                                    <span>Username or email</span>
                                    <input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
                                </label>
                                <label class="password">
                                    <span>Password</span>
                                    <input id="password" name="password" value="" type="password" placeholder="Password">
                                </label>
                                <button class="submit button" type="button">Sign in</button>
                                <p>
                                    <a class="forgot" href="#">Forgot your password?</a> / <a class="register" href="register.html">Create an account</a>
                                </p>        
                            </fieldset>
                        </form>
                    </div>
                    <div class="one-half log">
                        <h4>Not registered yet?</h4>
                        <p>Welcome! Register today for handy features and quicker checkout.</p>
                        <span><a href="register.html" class="reg">Register</a></span>
                    </div>
                </div>
                <div id="billing" class="hide">
                    <form class='wpsc_checkout_forms' action='<?php echo esc_url(get_option('shopping_cart_url')); ?>' method='post' enctype="multipart/form-data">
                        <?php
                        /**
                         * Both the registration forms and the checkout details forms must be in the same form element as they are submitted together, you cannot have two form elements submit together without the use of JavaScript.
                         */
                        ?>
                        <?php
                        if (wpsc_show_user_login_form()):
                            global $current_user;
                            get_currentuserinfo();
                            ?>
                            <div class="wpsc_registration_form">
                                <fieldset class='wpsc_registration_form wpsc_right_registration'>
                                    <h2><?php _e('Join up now', 'wpsc'); ?></h2>
                                    <label><?php _e('Username:', 'wpsc'); ?></label>
                                    <input type="text" name="log" id="log" value="" size="20"/><br/>
                                    <label><?php _e('Password:', 'wpsc'); ?></label>
                                    <input type="password" name="pwd" id="pwd" value="" size="20" /><br />
                                    <label><?php _e('E-mail', 'wpsc'); ?>:</label>
                                    <input type="text" name="user_email" id="user_email" value="" size="20" /><br />
                                    <div class="wpsc_signup_text"><?php _e('Signing up is free and easy! please fill out your details your registration will happen automatically as you checkout. Don\'t forget to use your details to login with next time!', 'wpsc'); ?></div>
                                </fieldset>
                            </div>
                            <div class="clear"></div>
                            <?php
                        endif; // closes user login form
                        $misc_error_messages = wpsc_get_customer_meta('checkout_misc_error_messages');
                        if (!empty($misc_error_messages)):
                            ?>
                            <div class='login_error'>
                                <?php foreach ($misc_error_messages as $user_error) { ?>
                                    <p class='validation-error'><?php echo $user_error; ?></p>
                                <?php } ?>
                            </div>
                            <?php
                        endif;
                        ?>
                        <?php ob_start(); ?>
                        <table class='wpsc_checkout_table table-1'>
                            <?php
                            $i = 0;
                            while (wpsc_have_checkout_items()) : wpsc_the_checkout_item();
                                ?>
                                <?php
                                if (wpsc_checkout_form_is_header() == true) {
                                    $i++;
                                    //display headers for form fields 
                                    ?>
        <?php if ($i > 1): ?>
                                    </table>
                                    <table class='wpsc_checkout_table table-<?php echo $i; ?>'>
        <?php endif; ?>

                                    <tr <?php echo wpsc_the_checkout_item_error_class(); ?>>
                                        <td <?php wpsc_the_checkout_details_class(); ?> colspan='2'>
                                            <h4><?php echo wpsc_checkout_form_name(); ?></h4>
                                        </td>
                                    </tr>
        <?php if (wpsc_is_shipping_details()): ?>
                                        <tr class='same_as_shipping_row'>
                                            <td colspan ='2'>
                                                <?php
                                                $checked = '';
                                                $shipping_same_as_billing = wpsc_get_customer_meta('shipping_same_as_billing');
                                                if (isset($_POST['shippingSameBilling']) && $_POST['shippingSameBilling'])
                                                    $shipping_same_as_billing = true;
                                                elseif (isset($_POST['submit']) && !isset($_POST['shippingSameBilling']))
                                                    $shipping_same_as_billing = false;
                                                wpsc_update_customer_meta('shipping_same_as_billing', $shipping_same_as_billing);
                                                if ($shipping_same_as_billing)
                                                    $checked = 'checked="checked"';
                                                ?>
                                                <label for='shippingSameBilling'><?php _e('Same as billing address:', 'wpsc'); ?></label>
                                                <input type='checkbox' value='true' name='shippingSameBilling' id='shippingSameBilling' <?php echo $checked; ?> />
                                                <br/><span id="shippingsameasbillingmessage"><?php _e('Your order will be shipped to the billing address', 'wpsc'); ?></span>
                                            </td>
                                        </tr>
                                        <?php
                                    endif;
                                    // Not a header so start display form fields
                                }elseif (wpsc_disregard_shipping_state_fields()) {
                                    ?>
                                    <tr class='wpsc_hidden'>
                                        <td class='<?php echo wpsc_checkout_form_element_id(); ?>'>
                                            <label for='<?php echo wpsc_checkout_form_element_id(); ?>'>
        <?php echo wpsc_checkout_form_name(); ?>
                                            </label>
                                        </td>
                                        <td>
                                            <?php echo wpsc_checkout_form_field(); ?>
                                            <?php if (wpsc_the_checkout_item_error() != ''): ?>
                                                <p class='validation-error'><?php echo wpsc_the_checkout_item_error(); ?></p>
        <?php endif; ?>
                                        </td>
                                    </tr>
                                    <?php
                                }elseif (wpsc_disregard_billing_state_fields()) {
                                    ?>
                                    <tr class='wpsc_hidden'>
                                        <td class='<?php echo wpsc_checkout_form_element_id(); ?>'>
                                            <label for='<?php echo wpsc_checkout_form_element_id(); ?>'>
        <?php echo wpsc_checkout_form_name(); ?>
                                            </label>
                                        </td>
                                        <td>
                                            <?php echo wpsc_checkout_form_field(); ?>
                                            <?php if (wpsc_the_checkout_item_error() != ''): ?>
                                                <p class='validation-error'><?php echo wpsc_the_checkout_item_error(); ?></p>
        <?php endif; ?>
                                        </td>
                                    </tr>
                                <?php }elseif ($wpsc_checkout->checkout_item->unique_name == 'billingemail') {
                                    ?>
                                    <?php
                                    $email_markup =
                                            "<div class='wpsc_email_address'>
                  <p class='" . wpsc_checkout_form_element_id() . "'>
                     <label class='wpsc_email_address' for='" . wpsc_checkout_form_element_id() . "'>
                     " . __('Enter your email address', 'wpsc') . "</label>
                  <p class='wpsc_email_address_p'>
                  " . wpsc_checkout_form_field();

                                    if (wpsc_the_checkout_item_error() != '')
                                        $email_markup.="<p class='validation-error'>" . wpsc_the_checkout_item_error() . "</p>";
                                    $email_markup.="</div>";
                                }else {
                                    ?>
                                    <tr>
                                        <td class='<?php echo wpsc_checkout_form_element_id(); ?>'>
                                            <label for='<?php echo wpsc_checkout_form_element_id(); ?>'>
        <?php echo wpsc_checkout_form_name(); ?>
                                            </label>
                                        </td>
                                        <td>
                                            <?php
                                            // xuất các input text
                                            echo wpsc_checkout_form_field();
                                            ?>
                                            <?php if (wpsc_the_checkout_item_error() != ''): ?>
                                                <p class='validation-error'><?php echo wpsc_the_checkout_item_error(); ?></p>
        <?php endif; ?>
                                        </td>
                                    </tr>
                                <?php }//endif;  ?>
                            <?php endwhile; ?>
                            <?php
                            $buffer_contents = ob_get_contents();
                            ob_end_clean();
                            if (isset($email_markup))
                                echo $email_markup;
                            echo $buffer_contents;
                            ?>
<?php if (wpsc_show_find_us()) : ?>
                                <tr>
                                    <td><label for='how_find_us'><?php _e('How did you find us', 'wpsc'); ?></label></td>
                                    <td>
                                        <select name='how_find_us'>
                                            <option value='Word of Mouth'><?php _e('Word of mouth', 'wpsc'); ?></option>
                                            <option value='Advertisement'><?php _e('Advertising', 'wpsc'); ?></option>
                                            <option value='Internet'><?php _e('Internet', 'wpsc'); ?></option>
                                            <option value='Customer'><?php _e('Existing Customer', 'wpsc'); ?></option>
                                        </select>
                                    </td>
                                </tr>
                            <?php endif; ?>
                            <?php do_action('wpsc_inside_shopping_cart'); ?>

                            <?php //this HTML displays activated payment gateways   ?>
<?php if (wpsc_gateway_count() > 1): // if we have more than one gateway enabled, offer the user a choice   ?>
                                <tr>
                                    <td colspan='2' class='wpsc_gateway_container'>
                                        <h3><?php _e('Payment Type', 'wpsc'); ?></h3>
    <?php wpsc_gateway_list(); ?>
                                    </td>
                                </tr>
<?php else: // otherwise, there is no choice, stick in a hidden form   ?>
                                <tr>
                                    <td colspan="2" class='wpsc_gateway_container'>
    <?php wpsc_gateway_hidden_field(); ?>
                                    </td>
                                </tr>
                            <?php endif; ?>

<?php if (wpsc_has_tnc()) : ?>
                                <tr>
                                    <td colspan='2'>
                                        <label for="agree"><input id="agree" type='checkbox' value='yes' name='agree' /> <?php printf(__("I agree to the <a class='thickbox' target='_blank' href='%s' class='termsandconds'>Terms and Conditions</a>", "wpsc"), esc_url(home_url("?termsandconds=true&amp;width=360&amp;height=400"))); ?> <span class="asterix">*</span></label>
                                    </td>
                                </tr>
<?php endif; ?>
                        </table>
                        <!-- div for make purchase button -->
                        <div class='wpsc_make_purchase'>
                            <span>
                                <?php if (!wpsc_has_tnc()) : ?>
                                    <input type='hidden' value='yes' name='agree' />
<?php endif; ?>
                                <input type='hidden' value='submit_checkout' name='wpsc_action' />
                                <input type='submit' id="buy_product_complete" value='<?php _e('Purchase', 'wpsc'); ?>' class='make_purchase' />
                            </span>
                        </div>
                        <div class='clear'></div>
                    </form>
                </div><!--end:billing-->
                <div id="delivery" class="hide">
                    <form action="#" class="form-register">
                        <div class="one-third first">
                            <h3>Your Personal Details</h3>
                            <div class="registerbox">
                                <fieldset>
                                    <div class="control-group">
                                        <label class="control-label"><span class="red">*</span> First Name:</label>
                                        <div class="controls">
                                            <input type="text"  class="input-xlarge">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label"><span class="red">*</span> Last Name:</label>
                                        <div class="controls">
                                            <input type="text"  class="input-xlarge">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label"><span class="red">*</span> Email:</label>
                                        <div class="controls">
                                            <input type="text"  class="input-xlarge">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label"><span class="red">*</span> Telephone:</label>
                                        <div class="controls">
                                            <input type="text"  class="input-xlarge">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label"> Fax:</label>
                                        <div class="controls">
                                            <input type="text"  class="input-xlarge">
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="one-third">
                            <h3>Your Address</h3>
                            <div class="registerbox">
                                <fieldset>
                                    <div class="control-group">
                                        <label class="control-label"> Company:</label>
                                        <div class="controls">
                                            <input type="text"  class="input-xlarge">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label"><span class="red">*</span> Last Name:</label>
                                        <div class="controls">
                                            <input type="text"  class="input-xlarge">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label"><span class="red">*</span> Address 1:</label>
                                        <div class="controls">
                                            <input type="text"  class="input-xlarge">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label"> Address 2:</label>
                                        <div class="controls">
                                            <input type="text"  class="input-xlarge">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label">
                                            <span class="red">*</span>City:</label>
                                        <div class="controls">
                                            <input type="text"  class="input-xlarge">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label">
                                            <span class="red">*</span>Post Code:</label>
                                        <div class="controls">
                                            <input type="text"  class="input-xlarge">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="select01" class="control-label">
                                            <span class="red">*</span>Country:</label>
                                        <div class="controls">
                                            <select id="select01" class="span3">
                                                <option>Country:</option>
                                                <option>Philippines</option>
                                                <option>Germany</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label">
                                            <span class="red">*</span>Region / State:</label>
                                        <div class="controls">
                                            <select id="select02" class="span3">
                                                <option>Region / State:</option>
                                                <option>Manila</option>
                                                <option>Cagayan de Oro City</option>
                                            </select>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="one-third">
                            <h3>Your Password</h3>
                            <div class="registerbox">
                                <fieldset>
                                    <div class="control-group">
                                        <label  class="control-label"><span class="red">*</span> Password:</label>
                                        <div class="controls">
                                            <input type="text"  class="input-xlarge">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label  class="control-label"><span class="red">*</span> Password Confirm::</label>
                                        <div class="controls">
                                            <input type="text"  class="input-xlarge">
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                    </form>
                </div><!--end:delivery-->
                <div id="deliverymethod" class="hide">
                    <p>Please select the preferred shipping method to use on this order.</p>
                    <label class="inline">
                        <input type="radio"  value="option1">
                        Flat Shipping Rate
                    </label>
                    <textarea rows="3" >Add Comment here...</textarea>
                    <br>
                    <span><a href="#">Continue</a></span>
                </div><!--end:deliverymethod-->
                <div id="payment" class="hide">
                    <p>Please select the preferred payment method to use on this order.</p>
                    <label class="inline">
                        <input type="radio"  value="option1">
                        Cash on delivery
                    </label>
                    <textarea rows="3" >Add Comment here...</textarea>
                    <br>
                    <span><a href="#">Continue</a></span>
                </div><!--end:payment-->
                <div id="confirm" class="hide">
                    <table class="shopping-cart">
                        <tr>
                            <th class="image">Image</th>
                            <th class="name">Product Name</th>
                            <th class="model">Model</th>
                            <th class="quantity">Quantity</th>
                            <th class="price">Unit Price</th>
                            <th class="total">Total</th>
                            <th class="action">Action</th>
                        </tr>
                        <?php
// bat dau lay san phan trong oder 
                        while (wpsc_have_cart_items()) : wpsc_the_cart_item();
                            $alt++;
                            $count++;
                            // if ($alt %2 == 1)
                            //   $alt_class = 'alt';
                            //	 else
                            // $alt_class = '';
                            ?>
                            <tr group="<?php echo wpsc_the_cart_item_key() ?>" 
                                class="product_row_update_quatily_<?php echo wpsc_the_cart_item_key() ?>">
                                <td class="firstcol wpsc_product_image wpsc_product_image_<?php echo wpsc_the_cart_item_key(); ?>">
                                    <?php
                                    //kiem tra anh san pham co hay ko
                                    if (wpsc_cart_item_image() != '') {
                                        ?>
                                        <img title="product" alt="product" src="<?php echo wpsc_cart_item_image(); ?>"
                                             height="50" width="50">
                                    <?php } else { ?>
                                        <span><?php _e('No Image', 'wpsc'); ?></span>
    <?php } ?>
                                    </a>
                                </td>
                                <td class="wproduct_row_update_quatily_<?php echo wpsc_the_cart_item_key(); ?>">
                                    <a href="<?php echo esc_url(wpsc_cart_item_url()); ?>">
    <?php echo wpsc_cart_item_name(); ?>
                                    </a>
                                </td>
                                <td class="model">Sample Model</td>
                                <td class="quantity">
                                    <form  
                                        action="<?php echo esc_url(get_option('shopping_cart_url')); ?>" 
                                        name="update_quatily_<?php echo wpsc_the_cart_item_key(); ?>"
                                        method="post" id="form_update">
                                        <input type='text' id="quantity_product" name='quantity' size='2' 
                                               value='<?php echo wpsc_cart_item_quantity(); ?>'/>
                                        <input type="hidden" name="key" id="key" 
                                               value="<?php echo wpsc_the_cart_item_key(); ?>"/>
                                        <input type="hidden" name="update_pro" value="true"/>
                                        <input type="hidden" name="product_id" id="product_id" 
                                               value="<?php echo wpsc_cart_item_product_id(); ?>"/>
                                </td>
                                <td class="price"><?php echo wpsc_cart_single_item_price(); ?></td>
                                <td class="wpsc_product_price wpsc_product_price_<?php echo wpsc_the_cart_item_key(); ?>">
                                    <span class="pricedisplay"><?php echo wpsc_cart_item_price(); ?></span>
                                </td>
                                </form> 
                                <td class="remove-update"> 
                                    <a value='update_quatily_<?php echo wpsc_the_cart_item_key(); ?>' 
                                       onclick="return get_value_remove(this);" class="tip remove" title="Remove">
                                        <img src="<?php echo get_template_directory_uri(); ?>/images/remove.png" alt=""/>
                                    </a>
                                    <a  value='update_quatily_<?php echo wpsc_the_cart_item_key(); ?>'
                                        onclick="return get_value(this);" 
                                        class="tip update"  title="Update"  id="update_quantity">
                                        <img src="<?php echo get_template_directory_uri(); ?>/images/update.png" alt=""/>
                                    </a>
                                </td>
                            </tr>
                            <?php
//end 
                        endwhile
                        ?>
                        <input type="hidden" name="count" value="<?php echo $count; ?>"/>
                    </table>
                    <div class="contentbox">
                        <div class="cartoptionbox one-half first">
                            <h4>
                                Choose if you have a discount code or reward points you want to use or would like to estimate your delivery cost. 
                            </h4>
                            <input type="radio" class="radio" value="ra1" name="ra_btn">
                            <span>Use Coupon Code</span> <br>
                            <input type="radio" class="radio" value="ra2" name="ra_btn">
                            <span>Use Gift Voucher</span> <br>
                            <input type="radio" class="radio" checked="checked" value="ra3" name="ra_btn">
                            <span>Estimate Shipping &amp; Taxes</span> <br><br>
                            <form action="#" class="ship">
                                <h4> Enter your destination to get a shipping estimate.</h4>
                                <fieldset>
                                    <div class="control-group">
                                        <label>Select list</label>
                                        <select  class="span3 cartcountry">
                                            <option>Country:</option>
                                            <option>Philippines</option>
                                            <option>United States</option>
                                        </select>
                                        <select class="span3 cartstate">
                                            <option>Region / State:</option>
                                            <option>Manila</option>
                                            <option>Los Angeles</option>
                                        </select>
                                        <input type="submit" value="Submit" class="submit">
                                    </div>
                                </fieldset>
                            </form>
                        </div><!--cartoptionbox-->
                        <div class="alltotal one-half">
                            <table class="alltotal">
                                <tr>
                                    <td><span class="extra">Sub-Total :</span></td>
                                    <td><span>$101.0</span></td>
                                </tr>
                                <tr>
                                    <td><span class="extra">Eco Tax (-2.00) :</span></td>
                                    <td><span>$11.0</span></td>
                                </tr>
                                <tr>
                                    <td><span class="extra">VAT (18.2%) :</span></td>
                                    <td><span>$21.0</span></td>
                                </tr>
                                <tr>
                                    <td><span class="extra grandtotal">Total :</span></td>
                                    <td><span  id="price" class="grandtotal"><?php echo wpsc_cart_total(); ?></span></td>
                                </tr>
                                <input type="submit" value="Continue Shopping">
                                <input type="submit" onclick="click_checkout()" value="CheckOut"/>
                            </table>
                        </div><!--end:alltotal-->
                    </div><!--end:contentbox-->
                </div><!--end:confirm-->
            </div>
        </div>
        <div style="clear:both; display:block; height:40px"></div> 
    </div><!--end:container-2-->